package main

import (
	"net/http"
	"html/template"
	"strings"
)


func serveIndex(w http.ResponseWriter, r *http.Request) {
	var err error
	// load template
	t := template.New("index")
	t = t.Funcs(template.FuncMap{ 
		"LocalURL": localURL,
		"Join": strings.Join,
	})
	t, err = t.Parse(index_template)
	if err != nil {
		panic(err)
	}

	err = t.Execute(w, recp)
	if err != nil {
		panic(err)
	}
}


const index_template = `
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>recp - Recipe Index</title>

    <!-- CCS -->

    <style type="text/css">
      .tags {
        display: inline-block;
      }
      .tag {
        float: left;
        display: inline-block;
        padding: 5pt;
        font-family: Helvetica;
      }
      .tag:hover {
        border: 2pt solid black;
        padding: 4pt;
      }
      .selected {
        color: black;
      }
      .unselected {
        color: grey;
      }
      .name {
        text-align: center;
        font-size: 12pt;
        font-family: Helvetica;
        padding-top: 9pt;
        padding-bottom: 3pt;
        color: black;
      }
      .newrecipe {
        text-align: center;
	font-size: 12pt;
	font-family: Helvetica;
	width: 250px;
	height: 220px;
	color: black;
	padding-top: 75pt;
      }
      .recipetags {
        text-align: left;
        font-size: 8pt;
        font-style: italic;
        color: grey;
	vertical-align: bottom;
	display: inline;
	padding-left: 3pt;
      }
      .cell {
        border: 1pt solid black;
        margin: 3pt;
        padding: 3pt;
        max-width: 270pt !important;
        float: left;
        display: inline;
	height: 220px;
      }
      .cell:hover {
        border: 3pt solid black;
        padding: 1pt;
      }
      .image {
	height: 167px;
	overflow: hidden;
      }
    </style>

    <!-- JAVASCRIPT -->

    <script type="text/javascript">

      function tag_clicked(tag) 
      {
        t = document.getElementById(tag)
        if(t.className == "tag selected")
          t.className = "tag unselected";
        else
          t.className = "tag selected";
        showHideRecipes();
      }

      function showHideRecipes()
      {
        var act_tags = document.getElementsByClassName('selected');
        var tags = []
        for (var i=0; i<act_tags.length; i++)
          tags.push(act_tags[i].id);

        var elems = document.getElementsByClassName('recipetags');
        for (var i=0; i<elems.length; i++) {
          var n = elems[i].innerHTML.split(", ");
          var found = false;
          for (var j=0; j<n.length; j++) {
            if (tags.indexOf(n[j]) != -1) {
              elems[i].parentElement.style.display = "inline";
              found = true;
              break;
            }
          }
          if (!found)
            elems[i].parentElement.style.display = "none";
        }
      }
    
    </script>

  </head>
  <body>
    <h1>Índice de Receitas</h1>
    <hr>
    <div class='tags'>
    {{ $recp := . }}
    {{ range .ListOfTags }} 
      <div class='tag selected' onclick='tag_clicked("{{.}}");' id="{{.}}">
        {{.}} ({{$recp.CountTags .}})
      </div>
    {{ end }}
    </div>
    <hr>
    <a href="add/">
      <div class="cell">
        <div class="newrecipe">Nova receita...</div>
      </div>
    </a>
    {{ range . }}
      <a href="recipe/{{ .Code }}">
        <div class="cell">
          <div class="image">
            <img class="recpimg" src="{{ LocalURL .Image }}" width=250 alt="{{ .Name }}">
          </div>
          <div class="name">{{ .Name }}</div>
	  <div class="recipetags">{{ Join .Tags ", " }}</div>
        </div>
      </a>
    {{ end }}
  </body>
</html>
`
